<!--suppress TypeScriptUnresolvedReference -->
<script setup lang="ts">
import { useRoute, useRouter } from "vue-router"
import { getAllProductApi, getProductDataApi } from "@/api/items/items"
import { productData } from "@/api/items/types/types"
import { ref, watch } from "vue"
import Layout from "@/views/layout/Layout.vue"
const router = useRouter()
watch(
  () => router.currentRoute.value,
  () => {
    categoryId.value = router.currentRoute.value.params.categoryId
    getProducts()
  }
)
const categoryId = ref(useRoute().params.categoryId)
const products = ref<productData[]>([])
const getProducts = () => {
  getProductDataApi(categoryId.value.toString())
    .then((res) => {
      products.value = res.data
      console.log(products.value)
    })
    .catch((err) => {
      console.log(err)
    })
}
getProducts()
const gotoProduct = (productId) => {
  router.push("/category/" + categoryId.value + "/" + productId)
}
</script>

<template>
  <layout>
    <h1 class="app-title">{{ categoryId }}</h1>
    <div v-for="product in products" :key="product">
      <div class="animal">
        <el-image class="pet-photo" :src="product.image" fit="fill" />
        <h2 class="pet-name" @click="gotoProduct(product.productId)">{{ product.name }}</h2>
        <p><strong>Product ID</strong> {{ product.productId }}</p>
      </div>
    </div>
  </layout>
</template>

<style scoped>
.animal {
  max-width: 650px;
  padding: 20px;
  margin: 30px auto;
  background-color: #fff;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.animal h4 {
  margin: 0 0 6px 0;
}

.pet-photo {
  height: 160px;
  float: left;
  width: 200px;
  margin-right: 15px;
}

.pet-name {
  font-size: 2rem;
  font-weight: normal;
  margin: 0 0 1rem 0;
}
.app-title {
  text-align: center;
  font-weight: normal;
  font-size: 2.6rem;
}
</style>
